<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images4/1.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images4/2.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images4/3.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images4/4.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images4/5.jpg" alt="广告五" /></a></li>
    </ul>
</div>
<script type="text/javascript" src="js/util.js"></script>
<script>
    var oDiv=document.getElementById('play');
    var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
    var oUl=oDiv.getElementsByTagName('ul')[0];

    var now = 0;

    for(var i=0;i<aBtn.length;i++){

        aBtn[i].index = i;

        aBtn[i].onclick = function () {

            now = this.index;
            tab();
        }
    }

    function tab() {
        for(var j=0;j<aBtn.length;j++){

            aBtn[j].className = '';
        }
        aBtn[now].className = 'active';//不是this.style.className

        startMove(oUl,{top:-150*now});
    }

    function next() {
        now++;
        if(now == aBtn.length){
            now=0;
        }
        tab();
    }
    var timer = setInterval(next,2000);
    oDiv.onmouseover = function () {
        clearInterval(timer);
    };
    oDiv.onmouseout = function () {
      timer = setInterval(next,2000);
    }


</script>
</body>
</html>